<!--
 * @Description: 饼图
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:06
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:28:51
-->
<template>
  <div style="height: 100%;">
    <div ref="image1" style="height: 200px;"></div>
  </div>
</template>

<script>
import { Pie } from '@antv/g2plot';
import { get } from '@/utils/request';
export default {
  data() {
    return {
      empData: []
    };
  },
  computed: {},
  methods: {
    loadPie() {
      const piePlot = new Pie(this.$refs.image1, {
        appendPadding: 10,
        data: this.empData,
        angleField: 'value',
        colorField: 'type',
        color: ({ type }) => {
          if (type === '在线') {
            return 'blue';
          }
          return 'pink';
        },
        radius: 0.8,
        label: {
          type: 'outer',
          content: '{name} {value}台',
          style: {
            fill: "#000"
          }
        },
        legend: {
          position: 'top',
          // 设置分类图列文本name属性
          itemName: {
            style: {
              fill: "#000"
            }
          },
        },
        tooltip: {
          domStyles: {
            "g2-tooltip": {
              background: "#ececec",
              color: "#000",
              fontSize: 20,
            },
          },
        },
        interactions: [{ type: 'pie-legend-active' }, { type: 'element-active' }],
      });

      piePlot.render();

    },
    async getEmpData() {
      let res = await get('/dashboard/queryDeviceOnlineNumber');
      this.empData = res.data;
    },
  },
  created() { },
  async mounted() {
    await this.getEmpData();
    this.loadPie();
  }
};
</script>
<style scoped></style>